<template>
	<div>
		<up-popup :show="showPopup" :safe-area-inset-bottom="true" mode="bottom" :round="16" @close="closePopup">
			<view class="popup-bottom-container" v-if="data">
				<view class="popup-header">预订须知</view>
				<view class="popup-close" @click="closePopup"></view>
				<view class="popup-content plr-24 safe-bottom-wrap">
					<view class="pt-20 pb-32">
						<view class="fs-40 font-600 mb-12">{{ data.display_name }}</view>
						<view class="mb-12" v-if="data.age_rules" v-for="(age, index) in data.age_rules" :key="index">
							<text class="c-grey-86">{{ age }}</text>
						</view>
					</view>
					<view class="book-tips">
						<view class="rule-item" v-if="data.sale_tips">
							<view class="label-title font-bold">购买须知</view>
							<view class="label-item" v-for="(item, index) in data.sale_tips" :key="index">
								<view class="rule-label text-ellipsis">{{ item.title }}</view>
								<view class="rule-desc">{{ item.content }}</view>
							</view>
						</view>
						<view
							class="rule-item"
							v-if="data.booking_tips"
							v-for="(item, index) in data.booking_tips"
							:key="index"
						>
							<view class="label-title font-bold">{{ item.title }}</view>
							<view class="label-content" :key="index">
								<view
									:class="{
										'multi-tips-content': strToArray(item.content)?.length > 1,
									}"
									v-for="(str, idx) in strToArray(item.content)"
									:key="idx"
								>
									{{ str }}
								</view>
							</view>
						</view>
					</view>

					<view class="btn-group">
						<view class="price-start">
							<text class="price-symbol">¥</text>
							<text class="price">{{ priceInCent(data.lowest_price_in_cent) }}</text>
							<text class="price-unit">起</text>
							<!--<text class="original">¥198</text>-->
						</view>
						<view class="btn" @click.stop="handleBooking">立即预订</view>
					</view>
				</view>
			</view>
		</up-popup>
	</div>
</template>

<script setup lang="ts">
// 根据UI图设置默认值
import { priceInCent } from "@/mixins/mixins"

const props = defineProps({
	modelValue: Boolean,
	data: {
		type: Object as () => any,
		default: () => null,
	},
})
const emit = defineEmits(["update:modelValue", "changeBookingTipsShow", "handleBooking"])

const strToArray = (str: string) => {
	return str.split("\n")
}

const showPopup = computed({
	get() {
		return props.modelValue
	},
	set(newValue) {
		emit("update:modelValue", newValue)
	},
})
// 处理关闭按钮点击
const closePopup = () => {
	emit("changeBookingTipsShow", { show: false })
	emit("update:modelValue", false)
}
const handleBooking = () => {
	emit("handleBooking", props.data)
}
onMounted(() => {})
</script>

<style lang="scss" scoped>
.book-tips {
	position: relative;

	.rule-item {
		border-bottom: 2rpx solid $c-grey-f3;
		padding-top: 32rpx;
		padding-bottom: 32rpx;

		&:last-child {
			border-bottom: 0;
		}

		.label-title {
			font-size: 32rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.9);
		}
		.label-item {
			margin-top: 24rpx;
			display: flex;

			.rule-label {
				height: 44rpx;
				line-height: 42rpx;
				text-align: center;
				width: 120rpx;
				border-radius: 8rpx;
				border: 2rpx solid $c-grey-e5;
				font-size: 24rpx;
				color: $c-black-1d;
				margin-right: 24rpx;
			}
			.rule-desc {
				font-size: 28rpx;
				color: $c-grey-4e;
				line-height: 44rpx;
				flex: 1;
				text-align: justify;
				white-space: pre-line;
				position: relative;
			}
		}

		.label-content {
			margin-top: 24rpx;
		}
		.multi-tips-content {
			padding-left: 20rpx;
			padding-bottom: 20rpx;
			line-height: 40rpx;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 8rpx;
				margin-top: 16rpx;
				background: #e7e7e7;
				border-radius: 50%;
			}
		}
	}
}

.btn-group {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

	.price-start {
		font-size: 24rpx;
		line-height: 24rpx;
		color: $red;

		.price {
			font-size: 48rpx;
			font-weight: 900;
			line-height: 36rpx;
		}

		.original {
			color: $c-grey-c9;
			text-decoration: line-through;
			margin-left: 8rpx;
		}
	}

	.btn {
		width: 340rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: $c-theme;
		font-size: 28rpx;
		font-weight: 600;
		color: $c-black-1d;
		border-radius: 40rpx;
	}
}
</style>
